<template>
	<view class="container productSort">
		<view class="navbar" :style="{ height: navH + 'rpx', opacity: opacity }">
			<view class="navbar-title" :style="'height:' + navH + 'rpx;'">
				<view class="display-flex display-flex-align-center" :style="'margin-top:'+(homeTop)+ 'rpx;'">{{scenicInfo?scenicInfo.name:'景点详情'}}</view>
			</view>
		</view>
		<!-- #ifndef MP-ALIPAY || MP-BAIDU-->
		
		<view class="head-wrapper" id="home" :style="{ top: homeTop + 'rpx' }">
			<view class="head-menu-new" :style="{color: (opacity > 0.7 ?'#000' :'#fff'),background:  (opacity > 0.7 ?'#fff' :'rgba(0, 0, 0, .25)'),border: (opacity>0.7?'none':'')}">
				<view class='iconfont icon-ic_left' @click="back()"></view>
			</view>
		</view>
		<!-- #endif -->
		
		<view class="carousel " style="background-color: #9d9d9d;">
			<swiper v-if="scenicInfo.slider_image &&scenicInfo.slider_image.length "  circular=true duration="400">
				<swiper-item class="swiper-item" v-for="(item,index) in scenicInfo.slider_image" :key="index">
					<view class="image-wrapper">
						<image :src="item" class="loaded" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
			<swiper v-else circular=true duration="400">
				<swiper-item class="swiper-item" v-for="(item,index) in [no_image]" :key="index">
					<view class="image-wrapper">
						<image :src="item" class="loaded" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<view v-if="scenicInfo" class=" " style="margin: 0 6px;border-radius: 8px;">
			<view class="introduce-block display-flex-column " style="">
				<view v-if="scenicInfo.notice" class="row-center notice " style="" @click="openNotice">
					<text class="iconfont icon-ic_tanhao" style="margin-bottom: 1px; margin-left: 15px;margin-right: 3px;color: #f95e53;font-size: 18px;"></text>
					<text style="color: #fd818d;">景区须知</text>
					<text class="iconfont icon-ic_right " style="color: ##f95e53; margin-left: auto;margin-right: 10px;"></text>
				</view>
				<view class="row-center u-skeleton-rect" style="height: 40px;margin: 0 15px;">
					<text style="font-size: 18px;font-weight: 600;">{{scenicInfo.name}}</text>
					<view class="grade-block" v-if="scenicInfo.grade"><text>{{scenicInfo.grade}}A</text></view>
				</view>
				<view class="row-center display-flex u-skeleton-rect" style="height: 30px;margin: 5px 15px;" @click="goIntro">
					<text class="" v-if="scenicInfo.status==1" style="color: #23beae;margin-right: 16px;">营业中</text>
					<text class="" v-else  style="color: #F44336;margin-right: 16px;">已闭园</text>
					<view class="text-ellipsis" style="width: 160px;">
						<view  v-html="scenicInfo.open_time?scenicInfo.open_time:'开放时间未知'"></view>
					</view>
					<view class="" style="color: #919191; margin-left: auto;">
						简介须知
						<text class="iconfont icon-ic_right" ></text>
					</view>	
				</view>
				<view class="line" style="margin: 0 12px;"></view>
				<view class="row-center " style="height: 30x;margin: 5px 15px;">
					<view v-if="scenicInfo.city" class="u-skeleton-rect text-ellipsis" style="margin-top: 10px;color: #000;width: 220px;height: 25px;line-height: 25px;">
						<text>{{scenicInfo.city}}·{{scenicInfo.county}}·</text>
						<text  v-if="scenicInfo.address">{{scenicInfo.address}}</text>
					</view>
					<view @click="goScenicArea(scenicInfo.gcj_lng_lat,scenicInfo.name)" class="display-flex-column u-skeleton-rect" style="margin-left: auto;margin-right: 10px;lign-items: center;">
						<text class="iconfont icon-ic_location5 " style="color: #2c63ff;text-align: center;"></text>
						<view class="" style="color: #2c63ff;font-size: 14px;">
							<text>地图</text>
							<text>·导航</text>
						</view>
					</view>
			
				</view>
			
			</view>
			
		</view>
		<!-- #ifdef MP-ALIPAY -->
		<f-sticky :scrollTop="scrollTop" :offsetTop="navH">
			<view class="scrbox" style="z-index: 2"  >
				<scroll-view class="scrollbox" scroll-with-animation="true" scroll-x="true" :scroll-left="tabLeft">
					<view class="tabbox">
						<view :class="{ 'tabbox-tab': true, 'tab-filled': item.filled }" v-for="(item, index) of tabList" :key="index" @click="pageScroll(index)">{{ item.title }}</view>
					</view>
				</scroll-view>
			</view>
		</f-sticky>
		<!-- #endif -->
		<!-- #ifndef MP-ALIPAY -->
		<view class="scrbox" style="z-index: 2"  :style="{ top: navH + 'rpx' }">
			<scroll-view class="scrollbox" scroll-with-animation="true" scroll-x="true" :scroll-left="tabLeft">
				<view class="tabbox">
					<view :class="{ 'tabbox-tab': true, 'tab-filled': item.filled }" v-for="(item, index) of tabList" :key="index" @click="pageScroll(index)">{{ item.title }}</view>
				</view>
			</scroll-view>
		</view>
		<!-- #endif -->
		<view class="artbox">
			<view class="article" v-for="(itemt, indext) of tabList" :key="index">
				<!-- 预定产品 -->
				<view  v-if="itemt.indext==0" class="scroll-box">
					<!-- <f-sticky :scrollTop="scrollTop" :offsetTop="(navH+120)">
						
					</f-sticky> -->
					<!-- #ifdef MP-ALIPAY -->
					<view v-if="mealList.length" class='aside'  :style="{ top: (navH+120+ toppx ) + 'rpx' }">
						<scroll-view scroll-y="true" scroll-with-animation='true' style="height: calc(100%)">
							<view class='item acea-row row-center-wrapper' :class='index==navActive?"on":""'
								v-for="(item,index) in mealList" :key="index" @click='changeMealTab(index,"b"+index)'>
								<text>{{item.meal_name}}</text>
							</view>
						
						</scroll-view>
					</view>
					<!-- #endif -->
					<!-- #ifndef MP-ALIPAY -->
					<view v-if="mealList.length" class='aside'  :style="{ top: (navH+120 ) + 'rpx' }">
						<scroll-view scroll-y="true" scroll-with-animation='true' style="height: calc(100%)">
							<view class='item acea-row row-center-wrapper' :class='index==navActive?"on":""'
								v-for="(item,index) in mealList" :key="index" @click='changeMealTab(index,"b"+index)'>
								<text>{{item.meal_name}}</text>
							</view>
						
						</scroll-view>
					</view>
					<!-- #endif -->
					
					<view v-if="mealList.length && scrollHeight" class='conter'>
							<block v-for="(item,index) in mealList" :key="index">
								<view class='listw' :id="'b'+index"  :style="navActive==index?'top:'+(navH +120)+'rpx':''">
									<view class='title acea-row row-center-wrapper'>
										<view class='line'></view>
										<view class='name'>{{item.meal_name}}</view>
										<view class='line'></view>
									</view>
									<view v-for="(detail,indexd) in item.details" :key="indexd" class="mb-10 pb-10 br-8" style="height: 90px;background-color: #f8fafd;">
										<view class="display-flex-column">
											<view class="text-18;" style="width: 60%;margin: 5px 12px;color: #000;font-weight: 600;">
												{{detail.scenic_product_name?detail.scenic_product_name:detail.product.store_name}}
											</view>
									
										</view>
										<view class="row-center ml-10" >
											<view class="row-column">
												<view v-if="detail.product.guarantee_data&&detail.product.guarantee_data.length" class="row-center" style="margin: 2px 0;font-size: 12px;">
													<view class="row-center" v-if="indexg<=2"  v-for="(guarantee,indexg) in detail.product.guarantee_data" :key="indexg">
														<view :style="indexg==0?'color: #fd8457':'color:#666'">
															{{guarantee}}
														</view>
														<view v-if="indexg!=(detail.product.guarantee_data.length-1)&&indexg<=1" class="shu-line4"></view>
													</view>
													
												</view>
												<view  @click="openLimitRefund(detail.product)" class="color-66 text-12 mt-10 mb-5 display-flex display-flex-align-center" >
													<text class="mr-10" >已售{{detail.product.sales}}+</text>
													<text >购买须知</text>
													<text class="iconfont icon-ic_right " ></text>
												</view>
											</view>
											<view class="row-center ml-auto mr-10" @click="goBuy(detail.product)">
												<view class="color-f60">
													<priceFormat class="ml-auto mr-10" :price="detail.product.price" weight intSize="40" floatSize="20" labelSize="26"></priceFormat>
												</view>
												<view class="yuding-btn"><text>预定</text></view>
											</view>
										</view>
										<view class="line"></view>
									</view>
								</view>
							</block>
							
					</view>
				</view>
				<!-- 预定产品 -->
				<!-- 用户评价 -->
				<view  v-if="itemt.indext==1"  class="">
					<view class='userEvaluation  pad20 ' >
						<view class='title acea-row row-between-wrapper skeleton-rect'>
							<view>用户评价({{replyCount}})</view>
							<navigator class='praise' hover-class='none' :url='"/pages/users/scenic_comment_list/index?scenic_id="+scenicInfo.id'>
								<text class='t-color'>{{replyChance}}</text>好评率
								<text class='iconfont icon-ic_right'></text>
							</navigator>
						</view>
						<block >
							<userEvaluation :reply="reply" :oneLine="true"></userEvaluation>
						</block>
					</view>
				</view>
				<!-- 用户评价 -->
				<!-- 景点介绍 -->
				<view  v-if="itemt.indext==2"  class="bg-white pb-20">
					<view >
						<view class="display-flex display-flex-align-center pd-10">
							<view class="text-16 text-black ft-w700">
								景点介绍
							</view>
							<view class="display-flex display-flex-align-center ml-auto" @click="goIntro">
								<text>查看更多</text>
								<text class='iconfont icon-ic_right'></text>
							</view>
						</view>
						<view v-if="scenicInfo.scenic_detail" class="centent-list">
							<!-- <view style="width: 100%;overflow: hidden;" v-html="scenicInfo.scenic_detail"></view>	 -->
							<jyf-parser :html="scenicInfo.scenic_detail" ref="article" :tag-style="tagStyle"></jyf-parser>
						</view>
						<view v-else class="pb-30">
						   <emptyPage title="暂无景点介绍～" :noImage="`${domain}/static/images/noRecord.png`"></emptyPage>
						</view>
					</view>
					
				</view>
				<!-- 景点介绍 -->
			</view>	
		</view>
		
	
		<!-- <view class="item-title" style="margin:15px;">
			<text class="u-skeleton-rect" >热门推荐</text>
			
		</view>
		<view class="" style="margin-bottom: 25px;">
			<u-waterfall v-model="hostProduct" ref="uWaterfall">
				<template v-slot:left="{leftList}">
					<view class="demo-warter" v-for="(item, index) in leftList" :key="index" @click="goProductDetail(item)">
						<u-lazy-load threshold="-10" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
						<view class="demo-title">
							{{item.store_name}}
						</view>
						<view class="demo-price">
							{{item.price}}元
						</view>
					</view>
				</template>
				<template v-slot:right="{rightList}">
					<view class="demo-warter" v-for="(item, index) in rightList" :key="index" @click="goProductDetail(item)">
						<u-lazy-load threshold="-10" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
						<view class="demo-title">
							{{item.store_name}}
						</view>
						<view class="demo-price">
							{{item.price}}元
						</view>
				
					</view>
				</template>
			</u-waterfall>
		</view>
	 -->
		<uni-popup ref="noticeRef" type="center">
			<view class="bg-white br-8 pd-10" style="height:350px;margin:0 30px">
				<view class="popup-header">
					<view class="popup-title">
						景点公告
					</view>
					<view @click="closeNotice" class="popup-close1 iconfont icon-ic_close text-18"></view>
				</view>
				<scroll-view scroll-y="true" class="" style="height: 300px;">
					<view class="pd-10">
						<rich-text :nodes="scenicInfo.notice"></rich-text>
					</view>
				</scroll-view>
				
			</view>
			
			
		</uni-popup>
		<uni-popup ref="limitRef" type="bottom"  background-color="#fff">
			<view class="bg-white br-8 pd-10 " style="height: 500px;">
				<view class="popup-header">
					<view class="popup-title">
						购买须知
					</view>
					<view @click="closeLimitRefund" class="popup-close1 iconfont icon-ic_close text-18"></view>
				</view>
				<scroll-view scroll-y="true" class="" style="height: 400px;">
					<view class="pd-20">
						<view v-if="storeInfo.productLimit && storeInfo.productLimit.length"  class="">
							<view class='mb-10'>预定限制</view>
							<view class="mb-20">
								<view class="cost-table">
									<!-- 1儿童限制2年龄限制3人群限制 -->
									<view class="cost-table-td" v-for="(limit,indexl) in storeInfo.productLimit" :key="indexl">
										<view class="cost-table-td-left ft-w500" style="background: #efeff4;">
											{{filterLimitType(limit.type)}}
										</view>
									<view class="cost-table-td-right color-66">
											{{limit.value}}
										</view>
									</view>
								</view>
							</view>
						</view>
						<view v-if="storeInfo.productRefundRate && storeInfo.productRefundRate.length"  class="">
							<view class='mb-10'>退改规则</view>
							<view class="mb-20">
								<view class="cost-table">
									<!-- 1儿童限制2年龄限制3人群限制 -->
									<view class="cost-table-td">
										<view class="cost-table-td-left color-66 ft-w500" style="width: 200px;background: #efeff4;">
											取消时间
										</view>
										<view class="cost-table-td-right color-66 ft-w500" style="background: #efeff4;">
											损失费用
										</view>
									</view>
									<view class="cost-table-td" v-for="(refundRate,indexl) in storeInfo.productRefundRate" :key="indexl">
										<view class="cost-table-td-left ft-w500" style="width: 200px">
											{{filterRefund(refundRate)}}
										</view>
										<view class="cost-table-td-right color-66">
											{{refundRate.value}}%
										</view>
									</view>
								</view>
							</view>
						</view>
						<view v-if="storeInfo.productRefundRule && storeInfo.productRefundRule.content" class="mt-10 mb-20">
							<view class="mb-5">
								<text class="color-red">*</text>退改特别说明：
							</view>
							<view class="">
								<jyf-parser  :domain='domain' :html="storeInfo.productRefundRule.content.replace(/<br\/>/ig, '')" ref="article" :tag-style="tagStyle"></jyf-parser>
							</view>
						</view>
					
					</view>
				</scroll-view>
				
			</view>
		</uni-popup>
		<wloading  ref="loading"  />
	</view>
</template>

<script>
	// import {getScenicDetail,getScenicProduct} from '@/api/store'
	import {getScenicDetail, getScenicLabelDataApi, postCartTourAdd} from '@/api/store'
	import userEvaluation from '@/components/userEvaluation';
	
	// import {postCartAdd,getProductHot} from '@/api/store'
	import emptyPage from '@/components/emptyPage.vue'
	import jyfParser from "@/components/jyf-parser/jyf-parser";
	import { HTTP_REQUEST_URL } from '@/config/app';
	import { mapGetters } from "vuex";
	import { toLogin } from '@/libs/login.js';
	import dayjs from '@/utils/day.js'
	import util from '@/utils/util.js'
	import { configMap } from "@/utils";
	
	let app = getApp();
	var sysHeight = uni.getSystemInfoSync().statusBarHeight;

	export default {
		components: {
			userEvaluation,emptyPage,jyfParser
		},
	
		computed: configMap({no_image: "https://qiniu.gzyxly.cn/def/3ce36202509191258161967.jpg"}, 
		mapGetters(['uid','isLogin','viewColor','keyColor'])),
		
		data() {
			return {
				tagStyle: {
					img: 'width:100%;display:block;margin-top:10px;border-radius: 8px;',
					video: 'width:100%;'
				},
				domain: HTTP_REQUEST_URL,
				navH: '',
				opacity: 0,
				homeTop: 59,
				isDate:1,
				hostProduct: [],
				buyNoticeShow:false,
				skeleton:true,
				height: 64, //header高度
				top: 44, //标题图标距离顶部距离
				scrollH: 0, //滚动总高度
				opcity: 0,
				iconOpcity: 0.5,
				noticeShow: false,
				noticeStr: '',
				ticketInfo: {},
				scenicInfo: '',
		
				toView: "",
				lock: false,
				mealList: [],
				number: "",
				height: 0,
				hightArr: [],
				navActive: 0,
				tabList: [],
				tabIndex: 0,
				tabBoxTop: '',
				scrollHeight: 0,
				tabLeft: 0, // 控制tab栏滚动位置
				scrollList: [], // 文章的滚动参数
				scrollLeftList: [], // tab栏滚动参数
				isRun: false ,// 是否正在滚动
				replyCount: 0,
				replyChance: 0,
				reply: [],
				storeInfo: '',
				id: '',
				scrollTop:0,
				toppx: 0,
			};
		},
		onLoad(options) {
			var that = this;
			this.id = options.id;
			// that.navH = app.globalData.navHeight+10;
			uni.getSystemInfo({
				success: function(res) {
					console.log('res',res)
					that.navH = res.statusBarHeight * (750 / res.windowWidth) + 100;
					// that.navH = app.globalData.navHeight+10;
					console.log('that.navH',that.navH)
				}
			});
			// #ifdef APP-PLUS || MP-ALIPAY
			that.homeTop = (that.sysHeight + 8)*2;
			// #endif
			// #ifdef H5
			that.homeTop = 10;
			// #endif
			const windowHeight = uni.getSystemInfoSync().windowHeight;
			console.log('windowHeight',windowHeight)
			
			// that.scrollHeight = windowHeight -this.rpxToPx(this.navH + 120)
			
		},
		onReady() {
			this.getDetail(this.id)
			// this.get_host_product()
			this.$nextTick(function() {
				// #ifdef MP-WEIXIN
				const menuButton = uni.getMenuButtonBoundingClientRect();
				const query = uni.createSelectorQuery().in(this);
				query
					.select('#home')
					.boundingClientRect(data => {
						this.homeTop = menuButton.top * 2 + menuButton.height - data.height;
					})
					.exec();
				// #endif
			});
			
			
		},
		onPageScroll : function(e) { //nvue暂不支持滚动监听，可用bindingx代替
			var that = this,
			scrollY = e.scrollTop;
			that.scrollTop = e.scrollTop;
			var opacity = scrollY / 200;
			opacity = opacity > 1 ? 1 : opacity;
			that.$set(that, 'opacity', opacity);
			that.toppx = that.pxToRpx(e.scrollTop)
			let scrollArr = this.hightArr;
			if (this.lock) {
				this.$set(this, 'lock', false);
				return;
			}
			// console.log('e.scrollTop',e.scrollTop)
			// for (let i = 0; i < scrollArr.length; i++) {
			// 	if (e.scrollTop >= 0 && e.scrollTop < scrollArr[1] - scrollArr[0]) {
			// 		this.navActive = 0
			// 	} else if (e.scrollTop >= scrollArr[i] - scrollArr[0] && e.scrollTop < scrollArr[i + 1] - scrollArr[0]) {
			// 		this.navActive = i
			// 	} else if (e.scrollTop >= scrollArr[scrollArr.length - 1] - scrollArr[0]) {
			// 		this.navActive = scrollArr.length - 1
			// 	}
			// }
			for (let i = 0; i < that.hightArr.length; i++) {
				if (e.scrollTop + this.rpxToPx(this.navH+120) >= that.hightArr[i] && e.scrollTop - this.rpxToPx(this.navH+120) <= that.hightArr[i]) {
					this.navActive = i
					return;
				}
			}
			// 防止在滚动过程中多次触发事件
			if (that.isRun) {
				return;
			}
			// 如果某一个元素接近顶部,触发tab切换效果
			for (let i = 0; i < that.scrollList.length; i++) {
				if (e.scrollTop + this.rpxToPx(this.navH+120) >= that.scrollList[i] && e.scrollTop - this.rpxToPx(this.navH+120) <= that.scrollList[i]) {
					that.tabClick(i);
					return;
				}
			}
		},
		
		methods: {
			openNotice(){
				this.$refs.noticeRef.open()
			},
			closeNotice(){
				this.$refs.noticeRef.close()
			},
			/**
			 * 获取我的推荐
			 */
			get_host_product: function() {
				let that = this;
				if(that.hotScroll) return
				getProductHot(
					that.hotPage,
					that.hotLimit,
				).then(res => {
					that.hotPage++
					that.hotScroll = res.data.length<that.hotLimit
					that.hostProduct = that.hostProduct.concat(res.data)
				});
			},
		
			infoScroll: function() {
				let that = this;
				if(!that.mealList.length) return
				let len = that.mealList.length;
				 
				this.number = that.mealList[len - 1].details.length;
				//设置产品列表高度
				uni.getSystemInfo({
					success: function(res) {
						that.height = (res.windowHeight) * (750 / res.windowWidth) - 98;
					},
				});
				let height = 0;
				let hightArr = [];
				console.log("len",len)
				const query = uni.createSelectorQuery();
				query.selectAll('.conter > .listw').boundingClientRect();
				query.exec(function(res) {
					console.log(res[0]);
					let items = res[0];
					let scrollList = [];
					for (let i in items) {
						let nowS = 0;
						nowS = items[i].top ;
						scrollList.push(nowS);
					}
					that.hightArr = scrollList;
					console.log("hightArr",that.hightArr)
				});
				// for (let i = 0; i < len; i++) {
				// 	//获取元素所在位置
				// 	let query = uni.createSelectorQuery();
				// 	let idView = "#b" + i;
				// 	query.select(idView).boundingClientRect();
				// 	query.exec(function(res) {
				// 		let top = res[0].top;
				// 		hightArr.push(top);
				// 		that.hightArr = hightArr
				// 	});
				// };
				console.log("hightArr",that.hightArr)
			},
			rpxToPx(rpx) {
			  // 获取设备的宽度
			  const windowWidth = uni.getSystemInfoSync().windowWidth;
			  // 将rpx转换为px，1rpx等于0.5px，设备宽度是基于750rpx
			  const px = (rpx / 750) * windowWidth;
			  return px;
			},
			pxToRpx(px, designWidth = 750) {
			    let screenWidth = uni.getSystemInfoSync().windowWidth;
			    return (px * designWidth / screenWidth);
			},
			scroll: function(e) {
				let scrollTop = e.detail.scrollTop;
				let scrollArr = this.hightArr;
				if (this.lock) {
					this.$set(this, 'lock', false);
					return;
				}
				for (let i = 0; i < scrollArr.length; i++) {
					if (scrollTop >= 0 && scrollTop < scrollArr[1] - scrollArr[0]) {
						this.navActive = 0
					} else if (scrollTop >= scrollArr[i] - scrollArr[0] && scrollTop < scrollArr[i + 1] - scrollArr[
							0]) {
						this.navActive = i
					} else if (scrollTop >= scrollArr[scrollArr.length - 1] - scrollArr[0]) {
						this.navActive = scrollArr.length - 1
					}
				}
				uni.$emit('scroll');
			},
			
			back: function() {
				uni.navigateBack();
			},
			getDetail(id){
				var that = this;
				this.$refs.loading.open();
				getScenicDetail(id).then(res => {
					this.scenicInfo = res.data;
					this.mealList = res.data.scenicMeal;
					that.$set(that, 'reply', res.data.topReply ? [res.data.topReply] : []);
					that.$set(that, 'replyCount', res.data.replayData && res.data.replayData.count);
					that.$set(that, 'replyChance', res.data.replayData && res.data.replayData.rate);
					// // #ifndef MP-ALIPAY
					// that.$nextTick(res => {
					// 	that.infoScroll();
					// })
					// // #endif
					
				    if(!this.mealList.length){
						this.tabList = [
							{
								title: '景点评价',
								filled: true,
								id: '#atc1',
								data:'',
								indext: 1
							},
							{
								title: '景点介绍',
								filled: false,
								id: '#atc2',
								data:'',
								indext: 2
							},
						]
						
					} else {
						this.tabList = [
							{
								title: '预定产品',
								filled: true,
								id: '#atc1',
								data:'',
								indext: 0
							},
							{
								title: '景点评价',
								filled: false,
								id: '#atc2',
								data:'',
								indext: 1
							},
							{
								title: '景点介绍',
								filled: false,
								id: '#atc3',
								data:'',
								indext: 2
							},
						]
						
					}
					this.initTab();
					
					var scrollHeight = 30;
					for(var i = 0; i < this.mealList.length;i++){
						// 标题45
						scrollHeight = scrollHeight + 45;
						var deLength = this.mealList[i].details?this.mealList[i].details.length:0;
						scrollHeight = scrollHeight + deLength*100
						
					}
					  this.scrollHeight = scrollHeight;  
					that.$nextTick(res => {
						that.infoScroll();
					})
									
					this.$refs.loading.close();
				}).catch(err => {
					this.$refs.loading.close();
					this.$util.Tips({
						title:err
					},{
						tab: 3,
						url: 1
					})
				})
			},
			initTab() {
				let that = this;
		
				// 获取渲染完成后的各个元素滚动参数
				setTimeout(function() {
					// 文章列表参数
					const query = uni.createSelectorQuery();
					query.selectAll('.artbox > .article').boundingClientRect();
					query.exec(function(res) {
						console.log(res[0]);
						let items = res[0];
						let scrollList = [];
						for (let i in items) {
							let nowS = 0;
							nowS = items[i].top - that.rpxToPx(that.navH+120);
							scrollList.push(nowS);
						}
						that.scrollList = scrollList;
						console.log(scrollList);
					});
		
					// tab栏参数
					const query2 = uni.createSelectorQuery();
					query2.selectAll('.tabbox > .tabbox-tab').boundingClientRect();
					query2.exec(function(res) {
						console.log(res[0]);
						let items = res[0];
						let scrollLeftList = [];
						for (let i in items) {
							let nowS = 0;
							nowS = items[i].left - 10;
							scrollLeftList.push(nowS);
						}
						that.scrollLeftList = scrollLeftList;
					});
				}, 100);
			},
			changeMealTab: function(index, id) {
				console.log(index, id)
				let that = this;
				// this.toView = id;
				this.navActive = index;
				if (that.isRun) {
					return;
				}
				that.isRun = true;
						
				// 滚动到指定文章的高度
				uni.pageScrollTo({
					scrollTop: that.hightArr[index]  - this.rpxToPx(this.navH+120),
					complete: function() {
						that.isRun = false;
					}
				});
				// console.log("this.rpxToPx(640)",this.rpxToPx(640))
				// // this.tabBoxTop = (this.navH+120) - 100*index
				// uni.pageScrollTo({
				//   scrollTop: this.rpxToPx(640) - 10, // 滚动到距离页面顶部100px的位置
				//   duration: 0 // 滚动动画的持续时间，必须为0
				// });
				
				// this.$set(this, 'lock', true);
				// uni.$emit('scroll');
			},
		
			// 点击tab栏
			pageScroll(index) {
				let that = this;
		
				if (that.isRun) {
					return;
				}
		
				that.tabClick(index);
				that.isRun = true;
		
				// 滚动到指定文章的高度
				uni.pageScrollTo({
					scrollTop: that.scrollList[index],
					complete: function() {
						that.isRun = false;
					}
				});
			},
			
		
			// 改变tab栏显示参数
			tabClick(index) {
				let that = this;
				let arr = that.tabList;
				arr.map(item => {
					item.filled = false;
				});
				arr[index].filled = true;
				that.tabList = arr;
				let nowleft = (that.arcWidth - 80) / 2; // 加入一点左边距，这样就不会贴着左边
				that.tabLeft = that.scrollLeftList[index] - nowleft;
			},
			
			getProductList(id){
				getScenicLabelDataApi().then(res => {
					this.productList = res.data
				})
			},
			goIntro(){
				uni.navigateTo({
					url:"/pages/scenic/intro/index?id="+this.scenicInfo.id
				})
			},
	
			
			openLimitRefund:function(item){
				this.storeInfo = item
				this.$refs.limitRef.open()
			},
			closeLimitRefund(){
				this.$refs.limitRef.close()
				this.storeInfo = ''
			},
			
			goBuy(product){
				
				if (!this.isLogin) {
					toLogin()
					return;
				} 
				if (product.type!=4) {
					 return	this.$util.Tips({title: '产品类型不正确'})
				} 
				
				if(!product.is_show){
				 return	this.$util.Tips({title: '该产品已下架'})
				}
				// 门票
				if(product.tour_type==1){
					// this.buyTicket(product);
					uni.navigateTo({
						url: `/pages/product/ticketDetails/index?id=${product.product_id}`
					})	
				}
				// 直通车
				if(product.tour_type==2){
					
					if(product.buy_type == 1){
						uni.navigateTo({
							url: `/pages/product/details/index?id=${product.product_id}`
						})	
					} else {
						var tow = dayjs().add(1, 'day');
						var selectDay = tow.format('YYYY-MM-DD')
						uni.navigateTo({
							url: '/pages/bus/plan_list/index?date='+selectDay
							+'&start_city_id='+product.start_city_id
							+'&start_stop_id='+product.start_stop_id
							+'&end_city_id='+product.end_city_id
							+'&end_stop_id='+product.end_stop_id
							+'&origin='+product.start_stop_name
							+'&destination='+product.end_stop_name
						})
					}
					
					
					// var tow = dayjs().add(1, 'day');
					// var selectDay = tow.format('YYYY-MM-DD')
					// uni.navigateTo({
					// 	url: '/pages/bus/plan_list/index?date='+selectDay
					// 	+'&start_city_id='+product.start_city_id
					// 	+'&start_stop_id='+product.start_stop_id
					// 	+'&end_city_id='+product.end_city_id
					// 	+'&end_stop_id='+product.end_stop_id
					// 	+'&origin='+product.start_stop_name
					// 	+'&destination='+product.end_stop_name
					// })
					// uni.navigateTo({
					// 	url: `/pages/product/details/index?id=${product.product_id}`
					// })	
				}
				// 其他旅游产品
				if(product.tour_type==3||product.tour_type==4||product.tour_type==5||product.tour_type==6){
					uni.navigateTo({
						url: `/pages/product/details/index?id=${product.product_id}`
					})	
				}
				
			},
			buyTicket(product){
				var that = this
				var  dateList = product.price_date_data;
				if(!dateList.length){
					 return	this.$util.Tips({title: '该产品暂未排期，不支持购买'})
				}
				for(var i = 0; i < dateList.length; i++){
					if(dateList[i].stock <= 0){
						dateList.splice(i,1)
					}
					dateList[i].price = dateList[i].adult_price
				}
				var selectDay =  dateList.length ? dateList[0]['date'] : '';
				const found = dateList.find(function(element) {
				  return selectDay == element.date;  
				});
				if(!found){
				}
				if(found != undefined){
					if(found.stock <= 0){
						return that.$util.Tips({
							title: "该产品暂未排期"
						});
					}
					if(found.adult_price <= 0){
						return that.$util.Tips({
							title: "该产品暂未排期"
						});
					}
				} else {
					return	this.$util.Tips({title: '该产品暂未排期，不支持购买'})
					
				}
				if(!product.attrSku.length){
					return	this.$util.Tips({title: '该产品暂未排期，不支持购买'})
				}
				let q = {
					is_new:  1,
					mer_id: product.mer_id,
					product_id: product.product_id,
					cart_num: 1,
					adult_num:  1,
					child_num: 0,
					old_num: 0,
					product_attr_unique: product.attrSku[0].unique,
					source: '',
					product_type: 0,
					spread_id: '',
					price_date_id: found.id,
					price_date: selectDay,
					tour_type: product.tour_type,
				};
				
						
				 
				postCartTourAdd({data: q})
					.then(function(res) {
						console.log('res',res)
						let cartId = res.data.cart_id
						uni.navigateTo({
							url: '/pages/users/ticketOrderConfirm/index?cartId=' + cartId+'&product_id='
							+product.product_id+'&sku_unique='+product.attrSku[0].unique+'&selectDay='+selectDay
						});
					})
					.catch(res => {
						return that.$util.Tips({
							title: res
						});
					});
			},
			goOrderWrite: function(id) {
				uni.navigateTo({
					url: '/pages/scenic/order_write?product_id='+this.productId+'&item_id='+id
				})
			},
			goProductDetail(item){
				uni.navigateTo({
					url:"/pages/product/product_detail?id="+item.id
				})
			},
			goScenicArea: function(res,name) {
	
				uni.openLocation({
					//​使用微信内置地图查看位置。
					latitude:  parseFloat(res.split(",")[1]),
					longitude: parseFloat(res.split(",")[0]),
					name: name,
				});
			},
			filterRefund(refundRate){
				// switch (refundRate.type) {
				// 	case 1:
				// 		return "使用前"+ (refundRate.refund_time?  refundRate.refund_time +'分钟（含）之前':'')
				// 	case 2:
				// 		return "使用前"+ (refundRate.refund_time?  refundRate.refund_time +'分钟之后':'');
			
				// }
				switch (refundRate.type) {
					case 1:
						return  "使用前"+ this.convertMinutesToTimeAgo(refundRate.refund_time)+'（含）之前'
					case 2:
						return  "使用前"+  this.convertMinutesToTimeAgo(refundRate.refund_time)+'之后';
				
				}
			},
			convertMinutesToTimeAgo(minutes) {
			  const days = Math.floor(minutes / (24 * 60));
			  const remainingMinutes = minutes % (24 * 60);
			  const hours = Math.floor(remainingMinutes / 60);
			  const minutesPart = remainingMinutes % 60;
			
			  let result = '';
			  if (days > 0) {
			    result += `${days}天前`;
			    if (hours > 0 || minutesPart > 0) {
			      result += `${hours.toString().padStart(2, '0')}:${minutesPart.toString().padStart(2, '0')}`;
			      if (hours === 0 && minutesPart === 0) {
			        result = result.slice(0, -1);
			      }
			    } else {
			      result = result.slice(0, -1);
			    }
			  } else if (hours > 0) {
			    result += `${hours}小时${minutesPart > 0? `${minutesPart}分钟` : ''}`;
			  } else {
			    result += `${minutesPart}分钟`;
			  }
			
			  return result;
			},
			filterLimitType(type){
				// 1儿童限制2年龄限制3人群限制
				switch (type) {
					case 1:
						return "儿童限制";
					case 2:
						return "年龄限制";
					case 3:
						return "人群限制";
				}
				
			},
		},
		

	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #F8F8F8;
	}
	.carousel {
		height: 400upx;
		position: relative;

		swiper {
			height: 100%;
		}

		.image-wrapper {
			width: 100%;
			height: 100%;
		}

		.swiper-item {
			display: flex;
			justify-content: center;
			align-content: center;
			height: 400upx;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.introduce-block {
		border-radius: 8px;
		position: relative;
		margin-top: -10px;
		background-color: #FFFFFF;
	}

	.notice {
		height: 40px;
		border-top-left-radius: 8px;
		border-top-right-radius: 8px;
		background-color: #fef3f2;
	}

	.grade-block {
		border-radius: 2px;
		color: #fff;
		font-weight: 700;
		background: linear-gradient(-90deg,#cf7632,#f8b891);
		width: 20px;
		line-height: 15px;
		height: 15px;
		text-align: center;
		font-size: 10px;
		margin-left: 4px;
		padding: 0 2px;
		align-items: center;
		justify-content: center;
	}

	.ticket-block {
		margin-left: 6px;
		margin-right: 6px;
		border-radius: 8px;
		margin-top: 10px;
		background-color: #FFFFFF;
	}

	.content {
		padding: 24rpx;
	}
	
	.tui-header-box {
		width: 100%;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 995;
	}
	
	.tui-header {
		width: 100%;
		font-size: 18px;
		line-height: 18px;
		font-weight: 500;
		height: 32px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.tui-header-icon {
		position: fixed;
		top: 0;
		left: 10px;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		height: 32px;
		transform: translateZ(0);
		z-index: 9999;
	}
	
	.tui-header-icon .tui-badge {
		background: #e41f19 !important;
		position: absolute;
		right: -4px;
	}
	
	.tui-icon-ml {
		margin-left: 20rpx;
	}
	
	.tui-icon-box {
		position: relative;
		height: 32px !important;
		width:32px !important;
		padding: 6px !important;
	
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.back {
		font-size: 20px;
		// font-weight: 600;
		line-height: 32px;
		// margin-left: 10px;
		// margin-bottom: 5px;
	}
	.mp-ticketcontent-title{
		font-size: 17px;
		color: #333;
		letter-spacing: -.4px;
		font-weight: 700;
		 margin-bottom: 14px;
	}
	.m_desc_item {
		padding-bottom: 14px;
		display: flex;
		flex-direction: row;
	}
	.m_desc_item_content{
		flex: 1;
	}
	.m_title_border {
		width: 69px;
		border: .5px solid #ffc899;
		border-radius: 2px;
		text-align: center;
		height: 21px;
		color: #f70;
		font-size: 13px;
		font-weight: 700;
	}
	.m_desc_item_name {
	    width: 25%;
	}
	
	.item-title {
		font-size: 28upx;
		font-weight: bold;
		padding: 10upx 0 0 0;
	
	}
	.navbar {
		position: fixed;
		background-color: #fff;
		top: 0;
		left: 0;
		z-index: 99;
		width: 100%;
	}
	.head-menu-new {
		display: flex;
		align-items: center;
		height: 60rpx;
		width: 60rpx;
		// background: rgba(0, 0, 0, .25);
		border: 0.5rpx solid #cecece;
		border-radius: 50%;
		.iconfont {
			flex: 1;
			text-align: center;
			// color: #fff;
			font-size: 18px;
			box-sizing: border-box;
			&.icon-ic_leftarrow {
				border-right: 1px solid #fff;
			}
		}
	}
	.navbar-title{
		display: flex;
		// align-items: center;
		color: #000;
		font-size: 16px;
		justify-content: center;
	}
	
	::v-deep uni-scroll-view {
		padding-bottom: 0 !important;
	}
	
	
	
	.productSort {
		display: flex;
		flex-direction: column;
		//#ifdef MP
		// height: calc(100vh - var(--window-top)) !important;
		//#endif
		//#ifndef MP
		// height: 100vh 
		//#endif
	}
	
	
	.productSort .scroll-box {
		// flex: 1;
		// overflow: hidden;
		display: flex;
	}
	
	// #ifndef MP
	uni-scroll-view {
		padding-bottom: 100rpx;
	}
	
	// #endif
	
	.productSort .aside {
		width: 180rpx;
		overflow: hidden;
		background-color: #f7f7f7;
		position: sticky;
		align-self: flex-start;
	}
	
	.productSort .aside .item {
		height: 100rpx;
		width: 100%;
		font-size: 26rpx;
		color: #424242;
		text-align: center;
	}
	
	.productSort .aside .item.on {
		background-color: #fff;
		border-left: 4rpx solid var(--view-theme);
		width: 100%;
		color: var(--view-theme);
		font-weight: bold;
	}
	
	.productSort .conter {
		flex: 1;
		height: 100%;
		overflow: hidden;
		padding: 0 14rpx;
		background-color: #fff;
		position: relative;
		padding-bottom: 20rpx;
	}
	
	.productSort .conter .listw {
		padding-top: 20rpx;
	}
	
	.productSort .conter .listw .title {
		height: 45px;
	}
	
	.productSort .conter .listw .title .line {
		width: 100rpx;
		height: 2rpx;
		background-color: #f0f0f0;
	}
	
	.productSort .conter .listw .title .name {
		font-size: 28rpx;
		color: #333;
		margin: 0 30rpx;
		font-weight: bold;
	}
	
	.productSort .conter .list {
		flex-wrap: wrap;
	}
	
	.productSort .conter .list .item {
		width: 245rpx;
		margin-top: 26rpx;
		border: 1px solid #ececec;
		border-radius: 5px;
		height: 40px;
		// line-height: 40px;
		margin-right: 10px;
		padding: 0 5px;
		justify-content: center;
	}
	
	.productSort .conter .list .item .picture {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
	}
	
	// .productSort .conter .list .item .picture image {
	// 	width: 100%;
	// 	height: 100%;
	// 	border-radius: 50%;
	// }
	
	.productSort .conter .list .item .picture {
	
		::v-deep ,
		::v-deep image,
		::v-deep .easy-loadimage,
		::v-deep uni-image {
	
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
		}
	}
	
	.productSort .conter .list .item .name {
		font-size: 24rpx;
		color: #333;
		// height: 40px;
		// line-height: 40px;
		// width: 200rpx;
		text-align: center;
		color: #000;
	}
	.tab-box{
		position: sticky;
		width: 100%;
		z-index: 20;
		border-radius: 12px 12px 0 0;
		background-color: #fff;
		box-shadow: 0 -1px #fff;
	}
	.tab-box-view{
		position: relative;
		height: 120rpx;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	.tab-box-item{
		height: 100%;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		flex: 1;
		position: relative;
	}
	.tab-box-text {
		font-size: 20PX;
		line-height: 20PX;
		color: #111;
	}
	.tab-box-text-line{
		width: 34PX;
		height: 4PX;
		position: absolute;
		bottom: 12PX;
		left: 50%;
		transform: translateX(-50%);
		border-radius: 2PX;
		background-image: linear-gradient(to right, rgb(113, 168, 246), rgb(0, 102, 246));
	}
	/*隐藏滚动条*/
	::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
	}
	
	.scrbox {
		position: sticky;
		width: 100%;
		z-index: 20;
		border-radius: 12px 12px 0 0;
		background-color: #fff;
		box-shadow: 0 -1px #fff;
		
	}
	
	.scrollbox {
		width: 100vw;
		box-sizing: border-box;
		position: relative;
		height: 120rpx;
		.tabbox {
			display: flex;
			flex-wrap: nowrap;
			box-sizing: content-box;
			background-color: #fff;
			height: 44px;
			.tabbox-tab {
				font-size: 20px;
				flex: 1;
				display: flex;
			    position: relative;
				align-items: center;
				justify-content: center;
			}
		}
	}
	.tab-filled{
		// color: #23beae;
	}
	.tab-filled:before {
			position: absolute;
			width: 80rpx;
			height: 10rpx;
			background-repeat: no-repeat;
			content: "";
			background-image: linear-gradient(to right, #007AFF 0%, #bfe7d9 100%);
			bottom: -10rpx;
			left: 50%;
			margin-left: -28rpx;
			top: 35px;
			border-radius: 4px;
		}
	
	.tabox-tab:first-child {
		margin-left: 0;
	}
	.userEvaluation {
	    margin-top: 20rpx;
	    background-color: #fff;
	}
	.userEvaluation .title {
	    height: 86rpx;
	    font-size: 28rpx;
	    color: #282828;
	    margin-left: 20rpx;
	    padding-right: 20rpx;
	}
	.userEvaluation .title  .praise {
	    font-size: 28rpx;
	    color: #999;
	}
	
	.centent-list {
	    margin-top: 12px;
	    padding: 0 12px;
	}
	.yuding-btn{
		height: 40px;
		line-height: 40px;
		width: 40px; 
		background-image: linear-gradient(to right,#fd860c, #fd5f33);
		border-radius: 8px;
		color: #FFFFFF;
		text-align: center;
	}
	.cost-table{
		border-radius: 10px;
		border: 1px solid #dde4ed
	}
	.cost-table-title{
		display: flex;
		flex-direction: row;
		align-items: center;
		background: #f6f8fa;
		border-radius: 10px 10px 0 0;
		padding: 10px;
	}
	.cost-table-td{
		display: flex;
		flex-direction: row;
		min-height: 30px;
		border-bottom: 1px solid #dde4ed;
	}
	.cost-table-td:last-child {
	    border-bottom: none;
	}
	.cost-table-td-left{
		width: 100px;
		border-right: 1px solid #dde4ed;
		padding: 10px;
		font-size: 14px;
		color: #333;
		align-items: center;
	}
	.cost-table-td-right{
		display: flex;
		justify-content: center;
		flex: 1;
		flex-direction: column;
		align-items: flex-start;
		padding: 10px;
	}
</style>	